﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>IMG ZOOM</title>
	<style>
		.container{
			position:relative;
		}
		
		.izImage, izViewer{
			border:1px solid #000;
			background:#fff url('o_loading.gif') no-repeat center;
		}
		.izImage{
			width:300px;
		}
		.izViewer{
			width:200px;
			height:200px;
			position:absolute;
			left:320px;
			top:0;
			display:none;
		}
		.list{
			padding-right:10px;
		}
		.list img{
			cursor:pointer;
			padding:1px;
			border:1px;
			solid #cdcdcd;
			margin-bottom:10px;
			display:block;
		}
		.list img.onzoom, .list img.on{
			padding:0px;
			border:2px solid #336699;
		}
		.izImage2{
			border:0;
			width:400px;
		}
		.izViewer2{
			width:360px;
			height:300px;
			position:absolute;
			left:420px;
			top:0;
			display:none;
			border:1px solid #999;
		}
		.handle2{
			display:none;
			opacity:0.6;
			filter:alpha(opacity=60);
			background:#E6EAF3;
			cursor:crosshair;
		}
	</style>
</head>
<body style="padding:100px">
	选择模式；<br />
	<input type="radio" name="izMode" value="simple" checked />
	一般模式
	<input type="radio" name="izMode" value="follow" />
	跟随模式
	<input type="radio" name="izMode" value="handle" />
	手柄模式
	<input type="radio" name="izMode" value="cropper" />
	切割模式
	<div class="container">
		<img id="idImage" class="izImage" src="o_mm_small.jpg" />
		<div id="idViewer" class="izViewer"></div>
	</div>
	<br>
	<div id="idHandle" style="display:none;opacity:0.5;filter:alpha(opacity=50);background:#fff;"></div>
	<div id="idHandle2" style="display:none;border:1px solid #000;"></div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<table>
		<tr valign="top">
			<td>
				<div id="idList" class="list"></div>
			</td>
			<td>
				<div class="container">
					<img id="idImage2" class="izImage2" />
					<div id="idViewer2" class="izViewer2"></div>				
				</div>
			</td>			
		</tr>
	</table>
	<div id="idHandle3" class="handle2"></div>
	<script type="text/javascript" src="./aider.js"></script>
	<script type="text/javascript" src="./j.js"></script>
	<script type="text/javascript" src="./je.js"></script>
	<script type="text/javascript">
		
		function $$(id){
			return document.getElementById(id);
		}
	
		var options = {
				scale : 5,
				zoomPic : 'o_mm_big.jpg'
			},
			iz = mooluZoom($$('idImage'), $$('idViewer'), options);
		
		$$OBEA.forEach(document.getElementsByName('izMode'),function(elem){
			elem.onclick = function(){
				iz.destroy();
				iz = mooluZoom($$('idImage'), $$('idViewer'), $$OBEA.extend(options, {
					mode : this.value,
					handle : this.value == 'handle' ? 'idHandle' : 'idHandle2'
				}));
			}
		});
	
		(function(){
		
		var iz = mooluZoom($$('idImage2'), $$('idViewer2'), {
			mode : 'handle',
			handle : 'idHandle3',
			scale : 2,
			delay : 0
		});
		
		var 
			arrPic = [],
			list = $$('idList'),
			image = $$('idImage2');			
		
		arrPic.push({
			smallPic: 'o_s_1.jpg', 
			originPic: 'o_m_1.jpg', 
			zoomPic: 'o_b_1.jpg'
		});
		
		arrPic.push({
			smallPic: 'o_s_2.jpg', 
			originPic: 'o_m_2.jpg', 
			zoomPic: 'o_b_2.jpg'
		});
		
		$$OBEA.forEach(arrPic, function(o, i){
			var 
			    img = list.appendChild(
						document.createElement('img'));
			img.src = o.smallPic;
			img.onclick = function(){
				iz.reset({
					originPic : o.originPic,
					zoomPic : o.zoomPic
				});
				
				$$OBEA.forEach(list.getElementsByTagName('img'),function(img){
					img.className = '';
				})
				
				img.className = 'onzoom';
			}
			
			var temp;
			img.onmouseover = function(){
				if(!this.className){
					this.className = 'on';
					temp = image.src;
					src = o.originPic;
				}
			}
			img.onmouseout = function(){
				if(this.className == 'on'){
					this.className = '';
					image.src = temp;
				}
			}
			
			if(!i){
				img.onclick();
			}
		});
		
		})()
	</script>
</body>
</html>